<template>
  <div>
    <div class="block">
      <span class="demonstration">默认 click 触发子菜单</span>
      <el-cascader
        :getCheckedNodes="true"
        v-model="value"
        :options="options"
        @focus="test"
        @change="handleChange"
      ></el-cascader>
    </div>
    <div class="block">
      <span class="demonstration">hover 触发子菜单</span>
      <el-cascader
        v-model="value"
        :options="options"
        :props="{ expandTrigger: 'hover' }"
        @change="handleChange"
      ></el-cascader>
    </div>
    <el-cascader
      @change="cascader"
      :props="cascaderData"
    ></el-cascader>
  </div>
</template>


<script>
import mock from './mock.json'
export default {
  created() {
    console.log(mock, 'mock');
  },
  data() {
    return {
      value: '',
      cascaderData: {
        children: '',
        value: '',
        // label: '',
        lazy: true,
        // 页面渲染时执行
        lazyLoad(node, resolve) {
          // node包括(当前点击的值, 级数)
          console.log(node, 'node');
          console.log(this, 'thiscascaderData');
          // 一秒后开始执行
          setTimeout(() => {
            console.log(this.value);
            if (node.level === 0) {
              // Array.from将类数组转换为数组.map 
              console.log(node);// 获取当前层级
              // 通过调用resolve将子节点数据返回，通知组件数据加载完成
              const arr = mock.firstLevel
              const cities = arr.map((value, i) => ({
                value: value.id,
                label: value.name,
                leaf: node.level >= 2
              }));
              resolve(cities);
            }
            // 二级
            if (node.level === 1) {
              // 获取关联id 传递到后台
              console.log(node.data.value, 'id');
              // Array.from将类数组转换为数组.map 
              console.log(node.level);// 获取当前层级
              // 通过调用resolve将子节点数据返回，通知组件数据加载完成
              let arr = mock.province
              const cities = arr.map((value, i) => ({
                value: value.id,
                label: value.name,
                leaf: node.level >= 2
              }));
              resolve(cities);
            }
            // 三级
            if (node.level === 2) {
              console.log('三级');
              // 获取关联id 传递到后台
              console.log(node.data.value, 'id');
              let arr = []
              if(node.data.value === "210000"){
                console.log('if');
                // 湖北
                 arr = mock.city
                console.log(arr, mock.city);
              }else if(node.data.value === "220000"){
                console.log('elseif');
                // 湖南
                 arr = mock.city2
              }
              // Array.from将类数组转换为数组.map 
              console.log(node.level);// 获取当前层级
              // 通过调用resolve将子节点数据返回，通知组件数据加载完成
              
              const cities = arr.map((value, i) => ({
                value: value.id,
                label: value.name,
                leaf: node.level >= 2
              }));
              resolve(cities);
            }
          }, 1000);
        }
      },
      testChildren: [{
        value: 'cexiangdaohang',
        label: '侧向导航'
      }, {
        value: 'dingbudaohang',
        label: '顶部导航'
      }],
      value: [],
      options: [{
        value: 'zhinan',
        label: '指南',
        children: [{
          value: 'shejiyuanze',
          label: '设计原则',
          children: [{
            value: 'yizhi',
            label: '一致'
          }, {
            value: 'fankui',
            label: '反馈'
          }, {
            value: 'xiaolv',
            label: '效率'
          }, {
            value: 'kekong',
            label: '可控'
          }]
        }, {
          value: 'daohang',
          label: '导航',
        }]
      }]
    };
  },
  methods: {
    handleChange(value) {
      console.log(value, this.value, 'va');
    },
    cascader(e) {
      console.log(e);
    },
    test(e) {
      console.log(this.value, e);
    }
  }
};
</script>